<template>
    <el-dialog :title="title" v-model="drawer" width="700px" :append-to-body="true" @close="close">
        <el-form :model="form" size="small" label-width="100px" ref="ruleRefForm" :rules="rules">
            <el-form-item label="上级分类" prop="parentId">
                <el-cascader v-model="form.parentId" :options="classify"
                    :props="{ value: 'id', label: 'navBarName', checkStrictly: true }"></el-cascader>
            </el-form-item>
            <el-form-item label="导航栏名称" prop="navBarName">
                <el-input placeholder="请输入导航栏名称" v-model="form.navBarName" style="width:182px"></el-input>
            </el-form-item>
            <el-form-item label="是否是外链" prop="isFrame">
                <el-radio-group v-model="form.isFrame">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="小程序显示" prop="wechatStatus">
                <el-radio-group v-model="form.wechatStatus">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="关联文章分类" prop="classId">
                <el-select v-model="form.classId" clearable placeholder="请关联">
                    <el-option
                    v-for="item in articleClass"
                    :key="item.id"
                    :label="item.className"
                    :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="导航栏地址" prop="navUrl">
                <el-input placeholder="请输入导航栏地址" :disabled="form.isFrame == '0'" v-model="form.navUrl"
                    style="width:182px"></el-input>
                <el-button type="text" style="margin-left: 5px;" @click="getTempPages">关联页面地址</el-button>
            </el-form-item>
            <!-- <el-form-item label="分类图标" prop="icon">
              <el-upload
                  ref="upload"
                  v-model:file-list="icon"
                  :action="action"
                  :headers="headers"
                  list-type="picture-card"
                  accept="image/*"
                  :limit="1"
                  :on-preview="handlePictureCardPreview"
                  :on-exceed="handleExceed"
                  :on-remove="handleRemove"
              >
                  <el-icon><ele-Plus /></el-icon>
              </el-upload>
          </el-form-item> -->
            <el-form-item label="排序" prop="sort">
                <el-input-number v-model="form.sort" :min="0" step-strictly :step="1"></el-input-number>
            </el-form-item>
            <el-form-item label="状态" prop="showStatus">
                <el-radio-group v-model="form.showStatus">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleRefForm)">提交</el-button>
                <el-button @click="resetForm(ruleRefForm)">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

    <el-dialog title="关联页面" v-model="dialogVisible">
        <el-table :data="tableData" border style="width: 100%" size="small">
            <el-table-column prop="pageName" label="页面名称" />
            <el-table-column prop="url" label="路径地址" />
            <el-table-column label="操作" width="100px" align="center" fixed="right">
                <template #default="scope">
                    <el-button type="primary" link @click="confirmSelect(scope.row)" size="small">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script>
import { computed, reactive, toRefs, ref } from 'vue'
import { genFileId, ElMessage } from 'element-plus'
import { create, update, getTempPage } from '/@/api/ws/nav'
import { Session } from '/@/utils/storage'
export default {
    name: 'NavFormDetail',
    props: {
        title: {
            type: String,
            default: '新增分类'
        },
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        defaultForm: {
            type: Object,
            default: () => {
                return {}
            }
        },
        classifyList: {
            type: Array,
            default() {
                return []
            }
        },
        articleClass: {
            type: Array,
            default() {
                return []
            }
        }
    },
    emits: ['onDetailSubmit'],
    setup(props, context) {
        const { dialogDrawer, defaultForm, classifyList } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const form = computed({
            get: () => {
                return defaultForm.value
            },
            set: val => {
                context.emit('update:defaultForm', val)
            }
        })
        const classify = computed(() => {
            return classifyList.value
        })
        const ruleRefForm = ref()
        const upload = ref()
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const chooseClassifyImage = () => {

        }
        const state = reactive({
            headers: {
                '17work': Session.get('token')
            },
            rules: {
                navBarName: [{ required: true, message: '请输入导航栏名称', trigger: 'blur' }],
                navUrl: [{ required: true, message: '请输入导航栏地址', trigger: 'blur' }]
            },
            icon: [],
            action: '/api/file/filaAttach/upload',
            dialogVisible: false,
            dialogImageUrl: '',
            tableData: [],
        })
        const submitForm = async (formEl) => {
            if (!formEl) return
            await formEl.validate((valid) => {
                if (valid) {
                    let data = form.value
                    let parentId = 0
                    if (data.parentId.length > 1) {
                        parentId = data.parentId[1]
                    } else {
                        parentId = data.parentId[0]
                    }
                    data.parentId = parentId
                    // 修改
                    if (data.id != null && data.id != '') {
                        update(data).then(res => {
                            if (res.code == 0) {
                                ElMessage.success("修改成功");
                                context.emit('onDetailSubmit', true)
                            } else {
                                ElMessage.error("修改失败");
                            }
                        })

                    }
                    // 新增
                    else {
                        create(data).then(res => {
                            if (res.code == 0) {
                                ElMessage.success("添加成功");
                                context.emit('onDetailSubmit', true)
                            } else {
                                ElMessage.error("添加失败");
                            }
                        })

                    }
                }
            })
        }
        const resetForm = (formEl) => {
            if (!formEl) return
            context.emit('update:dialogDrawer', false)
            formEl.resetFields()
        }
        const handlePictureCardPreview = (uploadFile) => {
            state.dialogImageUrl = uploadFile.url
            state.dialogVisible = true
        }
        const handleExceed = (files) => {
            upload.value.clearFiles()
            const file = files[0]
            file.uid = genFileId()
            upload.value.handleStart(file)
        }
        const handleRemove = () => {
            form.value.icon = ''
        }
        const getTempPages = () => {
            state.dialogVisible = true
            getTempPage(form.value.tempId).then(res => {
                state.tableData = res.data
            })
        }


        const confirmSelect = (data) => {
            state.dialogVisible = false
            form.value.pageId = data.id
            form.value.navUrl = data.url
        }

        return {
            drawer,
            close,
            form,
            classify,
            chooseClassifyImage,
            ruleRefForm,
            submitForm,
            resetForm,
            handlePictureCardPreview,
            handleExceed,
            upload,
            handleRemove,
            getTempPages,
            confirmSelect,
            ...toRefs(state)
        }
    }
}
</script>
  
<style scoped lang="scss">
.item-row {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border: 1px dashed #eee;
    font-size: 18px;
    color: #666;
}
</style>